<script src="<?php echo $this->config->item('base_url'); ?>js/echarts/dist/echarts.js"></script>
<script src="<?php echo $this->config->item('base_url'); ?>js/echarts/test/esl.js"></script>
<style>
    .operator-mg{
        background:#FFFEE6;
        color:#8F5700;
        padding:12px;
    }
    .operator-mg-tip{
        width:16px;
        height:16px;
        margin-right:8px;
        float:left;
    }
</style>
<div class="operator-mg">
    <div class="operator-mg-tip icon-tip"></div>
    <div>温馨提示：百度地图加载缓慢，请耐心等待</div>
</div>
<div id="region-heatmap" style="height: 570px;width: 1100px;overflow: hidden;margin:auto;">loading......</div>
<script>
    require.config({
        paths: {
            'theme': '<?php echo $this->config->item('base_url'); ?>js/echarts/theme',
            'extension': '<?php echo $this->config->item('base_url'); ?>js/echarts/extension'
        },
        packages: [
            {
                main: 'echarts',
                location: '<?php echo $this->config->item('base_url'); ?>js/echarts/src',
                name: 'echarts'
            },
            {
                main: 'zrender',
                location: '<?php echo $this->config->item('base_url'); ?>js/zrender/src',
                name: 'zrender'
            }
        ],
        urlArgs: '_v_=' + +new Date()
    });
    require([
        'echarts',
        'echarts/chart/scatter',
        'echarts/chart/effectScatter',
        'echarts/component/legend',
        'extension/bmap/bmap',
        'echarts/chart/heatmap',
        'echarts/component/visualMap',
        'echarts/component/grid',
        'echarts/component/polar',
        'echarts/component/tooltip'
    ], function (echarts) {
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };
        $.ajax({
            url: '<?php echo $this->config->item('base_url'); ?>visitor/getIP',
            method: 'post',
            success: function (re) {
                var obj = $.parseJSON(re);
                data = obj['data'];
                geoCoordMap = obj['geo'];
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        min: 0,
                        max: 30,
                        splitNumber: 5,
                        inRange: {
                            color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                        },
                        textStyle: {
                            color: '#000'
                        }
                    },
                    bmap: {
                        center: [104.114129, 37.550339],
                        zoom: 5,
                        roam: true,
                        mapStyle: {
                            styleJson: [{
                                    'featureType': 'water',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#d1d1d1'
                                    }
                                }, {
                                    'featureType': 'land',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#f3f3f3'
                                    }
                                }, {
                                    'featureType': 'railway',
                                    'elementType': 'all',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'highway',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#fdfdfd'
                                    }
                                }, {
                                    'featureType': 'highway',
                                    'elementType': 'labels',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'arterial',
                                    'elementType': 'geometry',
                                    'stylers': {
                                        'color': '#fefefe'
                                    }
                                }, {
                                    'featureType': 'arterial',
                                    'elementType': 'geometry.fill',
                                    'stylers': {
                                        'color': '#fefefe'
                                    }
                                }, {
                                    'featureType': 'poi',
                                    'elementType': 'all',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'green',
                                    'elementType': 'all',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'subway',
                                    'elementType': 'all',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'manmade',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#d1d1d1'
                                    }
                                }, {
                                    'featureType': 'local',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#d1d1d1'
                                    }
                                }, {
                                    'featureType': 'arterial',
                                    'elementType': 'labels',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'boundary',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#fefefe'
                                    }
                                }, {
                                    'featureType': 'building',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#d1d1d1'
                                    }
                                }, {
                                    'featureType': 'label',
                                    'elementType': 'labels.text.fill',
                                    'stylers': {
                                        'color': '#999999'
                                    }
                                }]
                        }
                    },
                    series: [
                        {
                            name: 'visitor',
                            type: 'heatmap',
                            coordinateSystem: 'bmap',
                            data: convertData(data),
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'purple'
                                }
                            }
                        },
                    ]
                };
                var myChart = echarts.init(document.getElementById('region-heatmap'));
                myChart.setOption(option);
            }
        });
    });
</script>